<template>
  <div>
    <div ref="radar" style="width: 100%; height: 450px" />
  </div>
</template>

<script>
// 导入 echarts
import * as echarts from "echarts";

export default {
  mounted() {
    this.echartInit();
  },
  methods: {
    echartInit() {
      const myChart = echarts.init(this.$refs.radar);
      //   图标自适应
      window.onresize = function () {
        myChart.resize();
      };
      const option = {
         color:"#859bd7",
         grid: {
          left: '2%',
          right: '2%',
          bottom: '%',
          top:"8%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          // x轴前后是否有缝隙
          boundaryGap: true,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          data: ["6:00", "8:00", "10:00", "12:00", "14:00", "16:00", "18:00","20:00","22:00","24:00","2:00","4:00"],
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            data: [0,120, 90,120,80,240,220,130,150,120,160,110],
            type: "line",
            areaStyle: {},
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>
